<template>
	 <ul class="time-axis">
            <li v-for="(item,index) in datalist">
                <h5> <span></span> {{item.time}} <p :class="item.no?'change':''">{{item.state}}</p> </h5>
                <div class='content'>
                    <p> <wioc-icon-svg name="icon-xinzengweizhi"></wioc-icon-svg> {{item.department}}</p>
                    <p>{{item.content}}</p>
                    <div class="image">
                        <img :src="imgitem.src" alt="" v-for="(imgitem,index) in item.imglist">

                    </div>
                </div>

            </li>

        </ul>
</template>

<script>
	export default {
		name: 'wioc-time-axis',
		 data(){
			return{

			}
		},
	props:{
            datalist:Array,
        },
    methods: {

    },
    mounted(){
    },
	};
</script>

<style lang="less" scoped>
	.time-axis{
        padding: 3%;
        li{
            &:nth-last-child(1){
                .content{
                    border: none;
                }
            }
            h5{
                font-size: .12rem;
                color: #595959;
                position: relative;
                span{
                    display: inline-block;
                    width: .08rem;
                    height: .08rem;
                    border-radius:.08rem;
                    background-color: #4BA0F3;
                    margin-right: .1rem
                }
                p{
                    background: rgba(246,100,100,0.30);
                    height: .21rem;
                    padding: 0 0.05rem;
                    font-size: .11rem;
                    color: #63BA96;
                    border-radius: .1rem;
                    line-height: .21rem;
                    text-align: center;
                    float:right;
                    font-weight: normal;
				}
				.change{
					color: #F66464;
					background: rgba(246,100,100,0.50);
				}
            }
            .content{
                    border-left: solid 1px #DCDEE3;
                    margin-left: .04rem;

                    p{
                        font-size: .1rem;
                        color: #666666;
                        margin-left: .2rem;
                        &:nth-child(1){
                            line-height: .3rem;
                        }
                        &:nth-child(2){
                            width: 65%;
                        }
                        .icon-svg{
                            width: 0.137rem;
                            height: 0.137rem;
                        }
                    }
                    .image{
                        padding:.1rem 0 .4rem .1rem;
                        img{
                            width: .7rem;
                            height: .7rem;
                            border-radius: .05rem;
                            margin-left: .1rem;
                        }
                    }

            }
        }
    }
</style>
